<script setup name="search-video">
import { formartNum, formatSongTime } from '@/utils/util'
import { Caution } from '@icon-park/vue-next'
import { useSearchResults } from '@/hookes/useSearch'
import IconPark from '@/components/common/IconPark.vue'

const props = defineProps({
  searchKey: {
    type: String
  }
})

const { list, loading, finished, empty, onLoad, highlightKeyword } = useSearchResults('video')
</script>

<template>
  <van-list v-model:loading="loading" :finished="finished" finished-text="~我是有底线的~" @load="onLoad">
    <RouterLink v-if="!empty" v-for="item in list" :key="item.id"
      :to="{ path: '/mvlist/detail', query: { id: item.id } }">
      <van-cell :border="false">
        <template #icon>
          <div class="icon">
            <van-image :src="item.cover" radius="6px" width="180" height="100" />
            <span class="duration">{{ formatSongTime(item.duration) }}</span>
          </div>
        </template>

        <template #title>
          <span v-html="highlightKeyword(item.name)"></span>
        </template>

        <template #label>
          <span v-html="highlightKeyword(item.name)"></span>
          <div class="playCount">{{ formartNum(item.playCount) }} 播放</div>
        </template>
      </van-cell>
    </RouterLink>
    <van-empty description="暂无数据" v-else>
      <template #image>
        <IconPark :icon="Caution" :size="40" :strokeWidth="1" />
      </template>
    </van-empty>
  </van-list>
</template>

<style scoped lang="scss">
.van-cell {
  color: var(--reversal-text);
  background-color: var(--list-background);
  opacity: .9;
  padding-top: 0;
  padding-bottom: 0;

  .icon {
    position: relative;

    .duration {
      position: absolute;
      right: 2px;
      bottom: 4px;
      font-size: 10px;
      color: white;
    }
  }

  :deep(.van-cell__title) {
    padding-left: 10px;

    .name {
      font-size: 14px;
    }
  }

  :deep(.van-cell__label) {
    font-size: 10px;
  }
}
</style>